<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>英雄排行榜</title>
    <link rel="stylesheet" type="text/css" href="./js/bootstrap.css"/>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");

    String num = request.getParameter("num");
    String name = request.getParameter("name");
    session.setAttribute("num",num);
    session.setAttribute("name",name);

%>

<div class="container" id="goodman">
    <div class="row">
        <div class="col-md-8">
            <table class="table table-hover">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>删除</th>
                    <th>修改</th>
                </tr>
                <tr v-for="(person,index) in people">
                    <td>{{person.num}}</td>
                    <td>{{person.name}}</td>
                    <td><button v-on:click="delrow(index)">删除</button></td>
                    <td><button v-on:click="amend(index)">修改</button></td>
                </tr>
            </table>

        </div>
        <div class="col-md-6">
            <form name="form" method="post" action="">
                编号:<input type="text" name="num" class="form-control" v-model="new_person.num"/>
                姓名:<input type="text" name="name" class="form-control" v-model="new_person.name"/><br />
                <button type="submit" class="btn btn-success" v-on:click="tianjia()">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vue=new Vue({
        el:'#goodman',
        data:{
            new_person:{
                num:'',
                name:''
            },
            people:[
                {
                    num:'01',
                    name:'宋江'
                },
                {
                    num:'02',
                    name:'李逵'
                }
                ,
                {
                    num:'03',
                    name:'林冲'
                },
                {
                    num:'<%= request.getParameter("num")%>',
                    name:'<%= request.getParameter("name")%>'
                }
            ]
        },
        methods:{
            delrow:function(index){
                this.people.splice(index,1)
            },
            tianjia:function(){
                this.people.push(this.new_person),
                    this.new_person={
                        num:'',
                        name:''
                    }
            },
            amend:function(index){
                this.new_person={
                    num:this.people[index].num,
                    name:this.people[index].name
                }
            }
        }
    });
</script>
</html>